<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>股票收藏</title>

    <script src="/vue/vue.js" type="text/javascript" crossorigin="anonymous"></script>
    <script src="/vue/axios.min.js"></script>
    <script src="/element-ui/index.js"></script>
    <link href="/element-ui/index.css" rel="stylesheet" >


</head>
<body>
<div id="app">
    <p>{{ message }}</p>
<!--    <el-button @click="visible = true">Button</el-button>-->
<!--    <el-dialog :visible.sync="visible" title="Hello world">-->
<!--        <p>Try Element</p>-->
<!--    </el-dialog>-->

<!--    <div class="row" >-->
<!--        <div class="col-md-4"></div>-->
<!--        <div class="block">-->
<!--            <span class="demonstration">时间:</span>-->
<!--            <el-date-picker-->
<!--                    v-model="tradeDate"-->
<!--                    type="date"-->
<!--                    @change="change"-->
<!--                    value-format="yyyyMMdd"-->
<!--                    placeholder="选择日期">-->
<!--            </el-date-picker>-->
<!--        </div>-->
<!--        <div class="col-md-4"></div>-->
<!--    </div>-->
<!--    <div class="row" >-->
<!--        <div id="topRiseChart" class="col-md-6" style="width: 800px;height:400px;"></div>-->
<!--        <div id="topFallChart" class="col-md-6" style="width: 800px;height:400px;"></div>-->
<!--    </div>-->
    <div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
        <el-button @click="deleteSelection()">删除收藏</el-button>
        <el-button @click="updateSelection()">更新日线数据</el-button>
    </div>
    <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            :data="tableData"
            @row-dblclick="dbSelected"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="code"
                label="代码"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="股票名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="industry"
                label="行业">
        </el-table-column>
        <el-table-column
                prop="concepts"
                label="概念">
        </el-table-column>
        <el-table-column
                prop="totalValue"
                label="总市值(亿)">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="120">
            <template slot-scope="scope">
                <el-button
                        @click.native.prevent="deleteRow(scope.$index, tableData)"
                        type="text"
                        size="small">
                    移除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: '我的收藏列表：',
            tradeDate: '20210811',//20210805
            // tableData: [{
            //     date: '2016-05-02',
            //     name: '王小虎',
            //     address: '上海市普陀区金沙江路 1518 弄'
            // }, {
            //     date: '2016-05-04',
            //     name: '王小虎',
            //     address: '上海市普陀区金沙江路 1517 弄'
            // }, {
            //     date: '2016-05-01',
            //     name: '王小虎',
            //     address: '上海市普陀区金沙江路 1519 弄'
            // }, {
            //     date: '2016-05-03',
            //     name: '王小虎',
            //     address: '上海市普陀区金沙江路 1516 弄'
            // }],
            tableData:[],
            visible: false,
            multipleSelection: []
        },
        // watch: {
        //     tradeDate: function (x) {
        //         this.tradeDate = x;
        //         this.initTopRiseChart()
        //         this.initTopFallChart()
        //     }
        // },
        mounted: function() {
            // this.initTopRiseChart()
            // this.initTopFallChart()
            this.initTable();
        },
        methods: {
            initTable() {
                var that = this
                axios.post('/stockCollect/list')
                    .then(function (response) {
                        that.tableData = response.data
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            dbSelected(row) {
                console.log(row)
                // debugger
                window.open("/StockDailyPrice/" + row.code);
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            deleteSelection() {
                if (this.multipleSelection.length>0) {
                    console.log(this.multipleSelection)
                    var codesArr = this.multipleSelection.map(x => x.code);
                    var codes = codesArr.join(",");

                    //解决axios传参后台接收不到的问题
                    var params = new URLSearchParams()
                    params.append('codes', codes)
                    var that = this
                    axios.post('/stockCollect/delcollect',params)
                        .then(function (response) {
                            // that.tableData = response.data
                            console.log(response);
                            alert("删除成功");
                            that.initTable();
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                }
            },
            updateSelection() {
                if (this.multipleSelection.length>0) {
                    console.log(this.multipleSelection)
                    var codesArr = this.multipleSelection.map(x => x.code);
                    var codes = codesArr.join(",");

                    //解决axios传参后台接收不到的问题
                    var params = new URLSearchParams()
                    params.append('codes', codes)
                    var that = this
                    axios.post('/stock/refreshCodeListDailyPriceToMax',params)
                        .then(function (response) {
                            // that.tableData = response.data
                            console.log(response);
                            alert("数据更新成功");
                            that.initTable();
                        })
                        .catch(function (error) {
                            console.log(error);
                        });





                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            change(x) {
                // 确定时间范围之后触发的函数
                // console.log(111)
                // console.log(x)
                this.tradeDate = x;
                // this.initTopRiseChart()
                // this.initTopFallChart()
            },
            toggleClick: function(){
                console.log(111)
            },
            // initTopRiseChart: function(){
            //     var myChart = echarts.init(document.getElementById('topRiseChart'));
            //
            //     // 指定图表的配置项和数据
            //     var option = {
            //         title: {
            //             text: '行业涨停TOP5'
            //         },
            //         tooltip: {},
            //         legend: {
            //             data:['涨停企业数量']
            //         },
            //         yAxis: {
            //             // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            //         },
            //         xAxis: {},
            //         series: [{
            //             name: '涨停企业数量',
            //             type: 'bar',
            //             // data: [5, 20, 36, 10, 10, 20]
            //         }]
            //     };
            //
            //     // 使用刚指定的配置项和数据显示图表。
            //     // myChart.setOption(option);
            //
            //     axios.get('/stockIndustry/getDataByDate?tradeDate='+this.tradeDate)
            //         .then(function (response) {
            //             console.log(response);
            //             option.yAxis.data = response.data.data.json1.map(x=>x.INDUSTRY);
            //             option.series[0].data = response.data.data.json1.map(x=>x.CNT);
            //             option && myChart.setOption(option);
            //         })
            //         .catch(function (error) {
            //             console.log(error);
            //         });
            //
            // },
            // initTopFallChart: function(){
            //     var myChart = echarts.init(document.getElementById('topFallChart'));
            //
            //     // 指定图表的配置项和数据
            //     var option = {
            //         title: {
            //             text: '行业跌停TOP5'
            //         },
            //         color : [ '#04bd2c', '#E0022B', '#E09107', '#A3E00B' ],
            //         tooltip: {},
            //         legend: {
            //             data:['跌停企业数量']
            //         },
            //         yAxis: {
            //             // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            //         },
            //         xAxis: {},
            //         series: [{
            //             name: '跌停企业数量',
            //             type: 'bar',
            //             // data: [5, 20, 36, 10, 10, 20]
            //         }]
            //     };
            //
            //     // 使用刚指定的配置项和数据显示图表。
            //     // myChart.setOption(option);
            //     axios.get('/stockIndustry/getDataByDate?tradeDate='+this.tradeDate)
            //         .then(function (response) {
            //             console.log(response);
            //             option.yAxis.data = response.data.data.json2.map(x=>x.INDUSTRY);
            //             option.series[0].data = response.data.data.json2.map(x=>x.CNT);
            //             option && myChart.setOption(option);
            //         })
            //         .catch(function (error) {
            //             console.log(error);
            //         });
            // }
        }
    })
</script>
</body>
</html>
